<template>
	<div class="indexMain">
    <mt-header :title="$route.meta.title" fixed>
      <span slot="right" @click="$router.push('/redpacket')">领红包</span>
    </mt-header>
		<div class="index-box">
			<!-- welcome -->
			<div class="index-welcome auto">
				<span>任务快捷入口</span>
				<span>HI,欢迎来到金手指</span>
			</div>
			<!-- task -->
			<div class="index-taskList">
				<ul>
					<li>
            <router-link :to="{name:'mission',query:{tab:1}} ">
						  <div class="autoImg">
							<img src="static/imgs/dianfu.png" alt="" title="垫付任务" />
						</div>
						  <p>垫付任务</p>
            </router-link>
					</li>
					<li>
            <router-link :to="{name:'mission'}">
              <div class="autoImg">
                <img src="static/imgs/browse.png" alt="" title="浏览任务" />
              </div>
              <p>浏览任务</p>
            </router-link>

					</li>
					<li >
						<div class="autoImg">
							<img src="static/imgs/buyerShow.png" alt="" title="买家秀任务" />
						</div>
						<p>敬请期待</p>
					</li>
					<li >
						<div class="autoImg">
							<img src="static/imgs/giftTask.png" alt="" title="礼品任务" />
						</div>
						<p>敬请期待</p>
					</li>
				</ul>
			</div>
		</div>
		<!-- banner -->
		<div class="index-banner">
			<ul>
        <li>
          <img src="static/imgs/538722068012784308.jpg" alt="">
        </li>
      </ul>
		</div>
		<!-- content -->
		<div class="index-content">
			<div class="index-content-box">
				<!-- notice -->
				<div class="notice-row">
					<span class="alert-row">
						<i><img src="static/imgs/laba.png"/></i>
						<a>公告</a>
					</span>
					<div class="notice-wrapper">
							<div v-for="(item,index) in noticeList" class="item-wrapper" :key="index">
								<div class="title"><div class="left-title">{{item.title}}</div> <div class="right-time">{{item.createtime | dateformat}}</div></div>
								<div class="label">{{item.content}}</div>
							</div>
					</div>
				</div>
				<!-- issue -->
				<div class="index-content-issue index-content-new">
					<div class="index-content-notice">
						<span>
							<i><img src="static/imgs/rentou.png"/></i>

							<a href="mqqwpa://im/chat?chat_type=wpa&uin=3173700944 QQ&version=1&src_type=web" v-if="isAndroid">有问题请咨询</a>
							<a href="mqq://im/chat?chat_type=wpa&uin=3173700944 QQ&version=1&src_type=web" v-else>有问题请咨询</a>
						</span>
						<span v-if="false">QQ群:&nbsp;643361533</span>
					</div>
				</div>
				<!-- Vip -->
				<div class="index-contentVip">
					<div class="index-contentVip-box">
						<div class="index-contentVip-left">
							<p>
								<span>成为VIP会员</span>
								<span>更多权利GO ></span>
							</p>
							<p>
								<span>可接单数更多</span>
								<span>高佣金任务优先展示</span>
							</p>
						</div>
						<div class="index-contentVip-right">
							<img src="static/imgs/vipIndex.png" alt="" title="" />
						</div>
					</div>
				</div>
				<!-- other -->
				<div class="index-other">
					<div class="index-other-entrance">
						<a></a>
						<a>其它快捷入口</a>
					</div>
					<!-- link -->
					<div class="index-other-link">
						<ul>
							<li v-if="false">
								<div class="index-other-link-box">
									<div class="left-img">
										<img src="static/imgs/scIndex.png" alt="" title=""/>
									</div>
									<div class="right-text">
										<p>
											<span>精灵商城</span>
											<span class="backColor">NEW</span>
										</p>
										<p>内部优惠券、免费兑换</p>
									</div>
								</div>
							</li>
							<li>
                <router-link :to="{name:'toMoney'}">
                  <div class="index-other-link-box">
                    <div class="left-img">
                      <img src="static/imgs/tgIndex.png" alt="" title=""/>
                    </div>
                    <div class="right-text">
                      <p>
                        <span>分享赚金</span>
                        <span class="backColor" id="hot">HOT</span>
                      </p>
                      <p>邀请好友享现金奖励</p>
                    </div>
                  </div>
                </router-link>
							</li>
							<li>
                <router-link :to="{name:'userInfo'}">
                  <div class="index-other-link-box">
                    <div class="left-img">
                      <img src="static/imgs/xsIndex.png" alt="" title=""/>
                    </div>
                    <div class="right-text">
                      <p>
                        <span>新手任务</span>
                      </p>
                      <p>完成绑定任务 奖励2金</p>
                    </div>
                  </div>
                </router-link>

							</li>
							<li>
                <router-link :to="{name:'orderDetails'}">
                  <div class="index-other-link-box">
                    <div class="left-img">
                      <img src="static/imgs/ddIndex.png" alt="" title=""/>
                    </div>
                    <div class="right-text">
                      <p>
                        <span>订单详情</span>
                      </p>
                      <p>任务订单列表</p>
                    </div>
                  </div>
                </router-link>

							</li>
							<li>
                <router-link :to="{name:'myAccount'}">
                  <div class="index-other-link-box">
                    <div class="left-img">
                      <img src="static/imgs/mxIndex.png" alt="" title=""/>
                    </div>
                    <div class="right-text">
                      <p>
                        <span>资金明细</span>
                      </p>
                      <p>账户收支明细</p>
                    </div>
                  </div>
                </router-link>

							</li>
							<li v-if="false">
								<div class="index-other-link-box">
									<div class="left-img">
										<img src="static/imgs/jiebeiIndexx.png" alt="" title=""/>
									</div>
									<div class="right-text">
										<p>
											<span>任务借贷</span>
										</p>
										<p>敬请期待</p>
									</div>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<!-- invite -->
			<div class="index-invite">
        <router-link  :to="{name:'toMoney'}">
          <img src="static/imgs/900370723899522389.png" alt="" title=""/>
        </router-link>

			</div>
			<!-- over -->
			<div class="index-over">
				<a class="border"></a>
				<a>大嘎好,我是底线</a>
				<a class="border"></a>
			</div>
		</div>
		<!-- fixed -->
		<div class="fixed-nav">
			<index-footer></index-footer>
		</div>
    <will-packet :id="myId" v-show="isRedPacket" @closePacket="handleClosePacket"></will-packet>
	</div>
</template>

<script>
  import {mapGetters,mapActions} from 'vuex'
	import IndexFooter from '@/components/base/IndexFooter'
  import {adminService,userService} from '#/service'
  import {MessageBox,Popup} from 'mint-ui';
  import BetterScroll from 'better-scroll'
  import MarqueeRollUp from 'marquee-roll-up'
  import {judge} from 'we-plugins'
  import WillPacket from './redpacket/will-packet.vue'
	export default {
		name: 'index',
    data(){
		  return {
				time: 5,
        isRedPacket: false,
        myId: null,
		    noticeList:[],
        isAndroid:judge.isAndroid
      }
    },
    methods: {
      ...mapActions([
        'changeIsLogin'
      ]),
      handleClosePacket() {
        this.isRedPacket = false
        let { approveState } = JSON.parse(localStorage.getItem('loginInfo'))
        if (approveState !==1) {
          MessageBox.confirm('新手请先至新手任务完成相关信息绑定，完成所有绑定后，平台奖励2金！').then(() => {
            this.$router.push('/bindTB')
          });
        }
      },
      getLotterList () {
        this.$nextTick(async () => {
          let res = await userService.lotteryList({
            data:{
              lolotteryId: ''
            }
          })
          if(res.data && res.data.length > 0){
            for (let i = 0; i < res.data.length; i++) {
              const { type, id } = res.data[i]
              if (type === 2) {
                MessageBox.confirm('恭喜您通过审核，获得一次转盘大抽奖，是否现在去抽奖?').then(() => {
                  this.$router.push({
                    path: '/lottery',
                    query: {
                      id: id
                    }
                  })
                });
              }
              if (type === 6) {
                this.myId = id
                this.isRedPacket = true
              }
            }
          }
        })
      }
    },
    created(){
      adminService.noticeList({
        success:(res)=>{
          this.noticeList=res.data
        }
      })
			if (this.isLogin) {
        this.changeIsLogin(false)
				const html = `
					<div class="model-content">
						<div>
							<p>哈喽，亲！</p>
							<p>欢迎登录金手指平台，点点手指，躺着就能赚钱哦！分享给亲朋好友，躺着赚取分享奖励佣金，还有抽不完的红包哦！！！！！！</p>
							<p>下面小编有幸耽误您几分钟，给大家分享下平台的运作流程。</p>
							<p>金手指是基于多平台合作，提升商家销售实力，增加买家收入的一个平台。买家登录平台后，注册完基本信息（平台基于监管买家卖家，请亲务必填写真实有效的信息哦），亲注册完后请先进入新手任务流程，完成新手任务后，就可以在平台上领取商家发布的任务了。请领取任务的亲，尽快完成商家任务后，就可以在自己的帐户信息里领取本金和佣金。</p>
							<p>本平台所有发布的任务商家均以向平台提交了足额的任务保证金和佣金，请亲务必放心。要注意的一点的，本平台所有发布的任务都无需正常签收，只需要关注相关平台的物流路径即可，当然亲在完成任务时也会不定期的收到商家额外赠送的小礼品，所以再次请亲务必填写真实信息。</p>
							<p>下面请动动手指分享你的推广链接，领取属于你的专属任务。</p>
						</div>
					</div>
				`
				MessageBox({
					title: '金手指阅读须知',
          message: html,
					closeOnClickModal: false
				}).then(action => {
					if (action === 'confirm') {
						this.getLotterList()
					}
				})
			} else {
				this.getLotterList()
			}
    },
		components: {
			IndexFooter,
      MarqueeRollUp,
      WillPacket
		},
		computed:{
      ...mapGetters([
        'isLogin'
			])
    },
    // watch:{
    //   noticeList:{
    //     immediate:true,
    //     handler(){
    //       setTimeout(()=>{
    //         if(!this.scroll){
    //           this.scroll=new BetterScroll(this.$refs.wrapper,{
    //             scrollX: false,
    //             scrollY: true,
    //             momentum: false,   //关闭或者打开惯性运动的执行
    //             snap: true,       //隔断（翻页）
    //             snapLoop: true,   //无限滚动
    //             snapThreshold: 0,
    //             snapSpeed: 400,   //滑动的时间
    //           });
    //           this.page=1
    //           setInterval(()=>{
    //             if(this.page===this.noticeList.length){
    //               this.page=1
    //               this.scroll.goToPage(0, 0 , 400)
    //             }else{
    //               this.scroll.next();
    //               this.page++
    //             }

    //           },2000)
    //         }
    //       },300)
    //     },
    //   }
    // }
	}
</script>

<style lang="less">
	.model-content {
		height: 400px;
    overflow-y: auto;
    text-align: left;
		p {
			text-indent: 2em;
		}
	}
  .wrap-box{
    overflow: hidden;
    height: 0.36rem;
  }

	html,
	body {
		font-size: 26.666666666667vw;
		background: #f5f5f5;
		font-family: 'pingFangSC-Medium','微软雅黑';
	}

	* {
		margin: 0;
		padding: 0;
	}

	img {
		border: none;
	}

	input {
		border: none;
		background: none;
		outline: none;
	}

	ul,
	li {
		list-style: none;
	}

	a {
		text-decoration: none;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.indexMain {
		width: 100%;
		height: 100%;
		overflow: auto;
		background: #f5f5f5;
	}

	.index-box {
		width: 100%;
		height: 1.69rem;
		overflow: hidden;
		background: rgb(142,10,190);
	}

	.index-box .auto {
		width: 92%;
		margin: 0 auto;
	}

	.index-welcome {
		width: 100%;
		height: 0.6rem;
	}

	.index-welcome span {
		display: block;
		float: left;
		color: white;
		font-size: 0.16rem;
		line-height: 0.6rem;
	}

	.index-welcome span:last-child {
		float: right;
		width: 1.5rem;
		height: 0.26rem;
		line-height: 0.26rem;
		text-align: center;
		color: #84b1f9;
		font-size: 0.12rem;
		background: white;
		border-radius: 0.2rem;
		margin-top: 0.2rem;
	}

	.index-taskList {
		width: 100%;
		height: 1.09rem;
		overflow: hidden;
	}

	.index-taskList ul li {
		width: 25%;
		height: auto;
		float: left;
		margin-top: 0.1rem;
	}

	.autoImg {
		width: 0.44rem;
		height: 0.49rem;
		margin: 0 auto;
	}

	.autoImg img {
		display: block;
		width: 100%;
		height: 100%;
	}

	.index-taskList ul li p {
		text-align: center;
		color: white;
		font-size: 0.14rem;
		margin-top: 0.12rem;
	}

	.index-banner {
		width: 100%;
		overflow: hidden;
	}

	.index-banner img {
		width: 100%;
		height: 100%;
		display: block;
	}

	.index-content {
		width: 100%;
		height: auto;
		overflow: hidden;
		margin-top: 0.08rem;
	}

	.index-content-box {
		width: 95%;
		margin: 0 auto;
		overflow: hidden;
	}

	.index-content-new {
		width: 100%;
		height: 0.36rem;
		background: white;
		border-radius: 0.2rem;
	}

	.index-content-notice {
		margin-left: 0.14rem;
	}
  .index-wrapper{
    height: 0.36rem;
    overflow: hidden;
  }
  .index-wrapper-ui{
    width: 100%;
    overflow: hidden;
  }
  .index-wrapper li{
    padding-right: 0.14rem;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size: 0.14rem;
    height: 0.36rem;
    line-height: 0.36rem;
  }
	.index-content-notice span {
		display: block;
		float: left;
		color: #818181;
		line-height: 0.36rem;
		font-size: 0.14rem;
	}

	.index-content-notice span:first-child {
		margin-right: 0.16rem;
	}

	.index-content-notice span i {
		display: inline-block;
		float: left;
		width: 0.18rem;
		height: 0.2rem;
		margin: 0.06rem 0.05rem 0 0;
	}

	.index-content-notice span i img {
		width: 100%;
		height: 100%;
		display: block;
	}

	.index-content-notice span a {
		display: block;
		color: #87b4fa;
		font-size: 0.12rem;
		float: left;
	}

	.index-content-issue {
		margin-top: 0.1rem;
	}

	.index-contentVip {
		width: 100%;
		height: 0.62rem;
		background: white;
		border-radius: 0.1rem;
		margin-top: 0.1rem;
	}

	.index-contentVip-box {
		width: 90%;
		margin: 0 auto;
	}

	.index-contentVip-left {
		width: 2.5rem;
		height: auto;
		margin-top: 0.1rem;
		float: left;
	}

	.index-contentVip-left p {
		width: 100%;
		margin-bottom: 0.1rem;
		float: left;
	}

	.index-contentVip-left p:last-child {
		margin-bottom: none;
	}

	.index-contentVip-left p span {
		color: #666666;
		font-size: 0.14rem;
		display: inline-block;
		float: left;
	}

	.index-contentVip-left p span:last-child {
		color: #5E99F8;
		margin-left: 0.05rem;
	}

	.index-contentVip-left p:last-child span {
		color: #777;
	}

	.index-contentVip-right {
		float: right;
		width: 0.6rem;
		height: 0.4rem;
		border-left: 0.02rem solid #e6e6e6;
		margin-top: 0.1rem;
	}

	.index-contentVip-right img {
		display: block;
		width: 0.4rem;
		height: 0.36rem;
		margin: 0.01rem 0 0 0.2rem;
	}
	.index-other{
		width: 100%;
		height: auto;
		overflow: hidden;
		background: white;
		margin-top: 0.1rem;
	}
	.index-other-entrance{
		width: 100%;
		height: 0.38rem;
		line-height: 0.38rem;
		border-bottom: 0.01rem solid #f9f9f9;
	}
	.index-other-entrance a{
		display: inline-block;
		float:left;
		color:#f727272;
		font-size: 0.14rem;
	}
	.index-other-entrance a:first-child{
		width: 0.05rem;
		height: 0.2rem;
		background: #5895f8;
		margin: 0.08rem 0.1rem 0 0.16rem;
	}
	.index-other-link{
		width: 100%;
		height: auto;
	}
	.index-other-link ul li{
		width: 50%;
		float:left;
		height: 0.9rem;
	}
	.index-other-link-box{
		width: 100%;
		padding: 0.3rem 0 0 0.2rem;
		float: left;
	}
	.left-img{
		 width: 0.3rem;
		 height: 0.3rem;
		 float:left;
	}
	.left-img img{
		display: block;
		width: 100%;
		height: 100%;
	}
	.right-text{
		float:left;
		margin-left: 0.05rem;
		width: 1.3rem;
	}
	.right-text p{
		width: 100%;
		float:left;
		color:#777777;
		font-size: 0.12rem;
		height: auto;
		margin-bottom: 0.02rem;
	}
	.right-text p:last-child{
		margin-bottom: none;
	}
	.right-text p span{
		display: block;
		float: left;
		font-size:0.14rem;
		color: #333333;
		margin-right: 0.05rem;
	}
	.right-text p span:last-child{
		margin-right: none;
	}
	.right-text p .backColor{
		width: 0.36rem;
		height: 0.16rem;
		line-height: 0.16rem;
		text-align: center;
		background: #4c9dff;
		font-size: 0.12rem;
		color: white;
		border-radius: 0.2rem;
	}
	.right-text p #hot{
		background: #ff5a00;
	}
	.index-invite{
		width: 100%;
		float: left;
		padding-bottom: 0.1rem;
	}
	.index-invite img{
		display: block;
		width: 100%;
	}
	.index-over{
		width: 90%;
		margin: 0 auto;
		padding-bottom: 0.7rem;
		overflow: hidden;
	}
	.index-over a{
		display: block;
		float: left;
		font-size: 0.1rem;
		color: #aaa;
		margin-right: 0.02rem;
	}
	.index-over .border{
		width: 1.18rem;
		height: 0.01rem;
		background: #ddd;
		margin-top: 0.05rem;
	}
	.notice-row {
		font-size: 0.16rem;
		background: white;
		border-radius: 0.2rem;
		padding: 0.1rem;
		.alert-row {
			i {
				width: 0.18rem;
				height: 0.2rem;
				img {
					width: 0.18rem;
				}
			}
			a {
				color: #87b4fa;
				font-size: 0.12rem;
				vertical-align: super;
			}
		}
		.notice-wrapper {
			.item-wrapper {
				border-left: #01579B 5px solid;
				padding-left: 0.1rem;
				margin-top: 0.1rem;
				&:nth-child(2n+1) {
					border-left: #EF9A9A 5px solid;
				}
				.title{
					.left-title {
						width: 48%;;
						display: inline-block;
						text-align: left;
						color: #444;
						font-size: 0.14rem;
					}
					.right-time {
						font-size: 0.12rem;
						width: 50%;
						display: inline-block;
						text-align: right;
						color: #999;
					}
				}
				.label{
					font-size: 0.13rem;
					color: #555;
					margin-top: 0.05rem;
				}
			}
		}
  }
   .mint-msgbox-cancel {
      flex: initial;
      border-right: 1px solid #ddd !important;
    }
</style>
